<template>
	<view class="container box">
		<view class="main">
			<template v-for="(item,index) in models">
				<span :class="index_model==index?'model-active':'model'" @click="changeModel(index)">
					{{item}}
				</span>
			</template>
		</view>
		<view class="contents" v-if="sportEvents[index_model]">
			<template v-for="(item,index) in sportEvents[index_model].events">
				<uni-row v-if="index%2==0" :gutter="20">
					<uni-col :span="12">
						<view class="sport-event">
							<uni-icons :color="sportEvents[index_model].events[index].fav?'red':'#6495ED'"
								@click="favFn(index)"
								:type="sportEvents[index_model].events[index].fav?'star-filled':'star'" size="30"
								class="icon-fav"></uni-icons>
							<image :src="sportEvents[index_model].events[index].img" mode="widthFix" class="event-img"
								@click="goTrain(sportEvents[index_model].events[index].id)">
							</image>
							{{sportEvents[index_model].events[index].event}}
						</view>
					</uni-col>
					<uni-col :span="12" v-if="index+1<sportEvents[index_model].events.length">
						<view class="sport-event">
							<uni-icons :color="sportEvents[index_model].events[index+1].fav?'red':'#6495ED'"
								@click="favFn(index+1)"
								:type="sportEvents[index_model].events[index+1].fav?'star-filled':'star'" size="30"
								class="icon-fav"></uni-icons>
							<image :src="sportEvents[index_model].events[index+1].img" mode="widthFix" class="event-img"
								@click="goTrain(sportEvents[index_model].events[index+1].id) ">
							</image>
							{{sportEvents[index_model].events[index+1].event}}
						</view>
					</uni-col>
				</uni-row>
			</template>
		</view>
		<!-- <view class="record-item" @click.native="changeShow">
			<view :class="isRecord?'record-hide':'record'">
				记录
			</view>

			<view class="record-item" v-if="!isRecord" @click="$go2Page('healthRecord')">
				健康记录
			</view>
			<view class="record-item" v-if="!isRecord" @click="$go2Page('traindDetail')">
				运动记录
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		getSportData,
		check,
		addData,
		remove
	} from '../../database/index.js'
	export default {
		data() {
			return {
				isRecord: true,
				models: ['有氧运动', '力量训练', '柔韧性运动'],
				sportEvents: '',
				index_model: 0
			}
		},
		async onLoad() {
			this.sportEvents = await getSportData()
		},
		async onShow() {
			this.sportEvents = []
			this.sportEvents = await getSportData()
		},
		async onPullDownRefresh() {
			this.sportEvents = await getSportData()
		},
		methods: {
			async favFn(index) {
				let fav = this.sportEvents[this.index_model].events[index].fav

				let [unique, msg] = await check('sportCollect', [{
					sport_Id: this.sportEvents[this.index_model].events[index].id,
					sport_collector: this.$store.getters.getToken
				}])
				if (unique) {
					let [res, msg] = await addData('sportCollect', {
						sport_Id: this.sportEvents[this.index_model].events[index].id,
						sport_collector: this.$store.getters.getToken
					}, '')
					if (res) {
						this.$showMsg(`已收藏`)
						this.sportEvents[this.index_model].events[index].fav = !fav
					}
				} else {
					let res = await remove('sportCollect', {
						sport_Id: this.sportEvents[this.index_model].events[index].id,
						sport_collector: this.$store.getters.getToken
					})
					if (res) {
						this.$showMsg(`取消收藏`)
						this.sportEvents[this.index_model].events[index].fav = !fav
					} else {
						this.$showMsg(`取消收藏失败`)
					}
				}

			},


			goTrain(sport_id) {
				setTimeout(() => {
					uni.navigateTo({
						url: `/pages/sport/training/training?id=${sport_id}`,
					})
				}, 1 * 1000)
			},
			changeShow() {
				this.isRecord = !this.isRecord
			},
			changeModel(index) {
				this.index_model = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.record {
		left: 30rpx;
		width: calc(100% - 40rpx);
		bottom: 20rpx;
		position: fixed;
		display: flex;
		width: 180rpx;

		.record-item {
			background-color: rgba(65, 105, 225, .6);
			color: white;
			text-align: center;
			padding: 25rpx 50rpx;
			border-right: 1rpx solid white;

			&:first-child {
				background-color: rgba(65, 105, 225, .8);
			}

			&:last-child {
				border-right: none;
			}
		}
	}


	.record-hide {
		@extend .record;
		border-right: none;
	}

	.box {
		color: black;
		position: relative;

		.contents {
			margin-top: 30rpx;
			flex: 1;

			.sport-event {
				text-align: center;
				background-color: white;
				margin-bottom: 20rpx;
				padding: 20rpx 0;
				position: relative;

				.icon-fav {
					position: absolute;
					right: 10rpx;
					top: 10rpx;
				}

				.event-img {
					display: block;
					margin: 0 auto;
					width: 60rpx;
					margin-bottom: 10rpx;
				}
			}
		}
	}

	.main {

		.model {
			font-size: 1rem;
			margin-right: 20rpx;
		}

		.model-active {
			@extend .model;
			font-size: 1.2rem;
			font-weight: 600;
			text-decoration: underline;
		}
	}
</style>